 <%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title><spring:message code="template.manage"/></title>
	<meta name="decorator" content="default"/>
    <link href="${ctxStatic}/draging/css/style.css" type="text/css" rel="stylesheet" />
    <script src="${ctxStatic}/draging/js/drag.js" type="text/javascript"></script>

    <script src="${ctxStatic}/colorpick/jQueryColorPicker.min.js" type="text/javascript"></script>
    <script src="${ctxStatic}/colorpick/jqColor.js" type="text/javascript"></script>

   <%-- <script src="${ctxStatic}/draging/idrag.js" type="text/javascript"></script>--%>
    <style>
        .box{
            background-color:${empty eleTemplet.background.color?'#3bb3e0':fns:getColor(eleTemplet.background.color)};

            <c:if test="${empty eleTemplet.background.bgGif}">
            background-image: url("${eleTemplet.background.bgImage}");
            </c:if>
            <c:if test="${not empty eleTemplet.background.bgGif}">
                background-image: url("${eleTemplet.background.bgGif}");
            </c:if>
        }
        .tu-con{/*width: 1200px;*/margin-top: 30px;}
        .tu-con .box-par{/*width: 750px;*/float: left;}
        .tu-con .tu-con-sou{width: 100%;float: left;margin-top: 30px;}
        .tu-con .tu-con-sou .tu-con-item{width: 50px;cursor:pointer;float:left;margin-right: 5px;position: relative;border: 1px #357ebd solid;margin-top: -1px;}
        .tu-con .tu-con-sou >img{width: 50px;height: 50px;}
        .tu-con .tu-con-sou .tu-con-item span{text-align: center;display:none;}
        .tu-con .tu-con-sou .tu-con-item .tu-cur{position: absolute; bottom: 0; right: 0;}
        .tu-con .tu-con-sou .tu-con-item .tu-cur img { width: 25px; display: block; }
        dl{margin-bottom: 0!important;}
        dl img{position: absolute;z-index: 9;}
        .coor{ cursor: se-resize; background: #797878; height: 18px; width: 18px; position: absolute; bottom: -1px; right: -2px;  z-index: 99; }
        .btn{min-width: inherit;line-height: initial;display:inline-block !important;}
        .item_show{width: 100%;height: 100%;position: absolute;z-index: 10;display: table;}
        .input_tmp{width: 160px !important;}
        .form-search .ul-form li label {
            width: 100px !important;
            text-align: right;
        }
    </style>
	<script type="text/javascript">
        function setBack(url){
            $(".box").css("background-image", "url("+url+")");
        }
        var eleTempletSourceList = {};
        var currentSourceType = "";
        <c:forEach items="${eleTemplet.eleTempletSourceList}" var="source">

        <c:if test="${'apk' != source.sourceType}">
            var ${source.sourceType} = {};
            ${source.sourceType}.delFlag='0';
            ${source.sourceType}.id='${source.id}';
            ${source.sourceType}.sourceType='${source.sourceType}';
            ${source.sourceType}.width=0+${0+source.width};
            ${source.sourceType}.height=0+${0+source.height};
            ${source.sourceType}.xloc=0+${0+source.xloc};
            ${source.sourceType}.yloc=0+${0+source.yloc};
            ${source.sourceType}.resourceId='${source.resourceId}';
            ${source.sourceType}.resourceName='${source.resourceName}';

            var view = {};
            view.content = '${source.sourceDetail.content}';
            view.color = '${source.sourceDetail.color}';
            view.bgcolor = '${source.sourceDetail.bgcolor}';
            view.size = '${source.sourceDetail.size}';
            view.imgpath = '${source.sourceDetail.imgpath}';
            view.align = '${source.sourceDetail.align}';
            view.alpha = '${source.sourceDetail.alpha}';

            view.column = '${source.sourceDetail.column}';
            view.width = '${source.sourceDetail.width}';
            view.w_space = '${source.sourceDetail.w_space}';
            view.lineheight = '${source.sourceDetail.lineheight}';

            view.type = '${source.sourceDetail.type}';

            ${source.sourceType}.view = view;

            eleTempletSourceList.${source.sourceType} = ${source.sourceType};
        </c:if>
        </c:forEach>

		$(document).ready(function() {
           /* var w= $(window).width()-480;
            $(".set-out").width(w);*/

            $("#inputForm").validate({
				submitHandler: function(form){
					//loading('<spring:message code="common.subbmiting"/>');
                    timeVali($("#btnSubmit"));
                    saveTempeteSource();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

            $.each(eleTempletSourceList, function(index, value, array) {
                var item = $("#img_"+value.sourceType).parent();
                var width = value.width;
                var height = value.height;
                var xloc = value.xloc;
                var yloc = value.yloc;

                addDrapItem(item, width, height, xloc, yloc);
            });
        });

        function saveTempeteSource(){
            var eleTempletId = $("#eleTempletId").val();
            var name = $("#name").val();
            var templateType =$("#templateTypeId").val();

            var displaymode =$("#displaymode").val();
            var width = parseInt($("#width").val());
            var height = parseInt($("#height").val());

            var templetWidth = width;
            var templetHeight = height;

            // 如果是横屏,宽度 大于 高度
            if (displaymode === 0 || displaymode === '0') {
                if (width >= height) {
                } else {
                    templetWidth = height;
                    templetHeight = width;
                }
            } else {
                if (height >= width) {
                } else {
                    templetWidth = height;
                    templetHeight = width;
                }
            }

            var remarks =$("#templet_remarks").val();
			var font = $("#fontId").val();
			var fullscreen = $("#fullscreen").val();
			
			var color = $("#templet_color").val();
			var bgImage = $("#bgImage").val();
			var bgGif = $("#bgGif").val();

			if(font == null || font === ""){
                alertx("<spring:message code='tips.nofont' />");
				return;
			}
            if(width<=0 || height<=0){
                alertx("<spring:message code='tips.500px' />");
                closeLoading();
                return;
            }

            $.each(eleTempletSourceList, function(index, value, array) {
                var sourceType = value.sourceType;
                try{
                    value.xloc = parseInt($("#"+sourceType).css("left").replace("px",""));
                    value.yloc = parseInt($("#"+sourceType).css("top").replace("px",""));
                }catch (e){}
                eleTempletSourceList[sourceType] = value;
            });
           	var resourceIdExists = true;
            $.each(eleTempletSourceList, function(index, value, array) {
                var sourceType = value.sourceType;
                console.log(sourceType);
                if(!(sourceType == "multimedia" || sourceType == "sub" || sourceType == "title")){
               		if(eleTempletSourceList[sourceType].delFlag == 0 &&
                    	(eleTempletSourceList[sourceType].resourceId == ""
                    	|| eleTempletSourceList[sourceType].resourceId == null)){
               			resourceIdExists = false;
               		}
               	}
            });
            console.log(resourceIdExists);
            if(!resourceIdExists){
            	alertx("<spring:message code='tips.unchoose' />");
            	return;
            }
            var flag = true;
            $.each(eleTempletSourceList, function(index, value, array) {
                if(value.delFlag == '0' || value.delFlag == 0){
                    var xloc = parseInt(value.xloc);
                    var yloc = parseInt(value.yloc);

                    var itemwidth = parseInt(value.width);
                    var itemheight = parseInt(value.height);

                    if (xloc + itemwidth > templetWidth+5 || yloc + itemheight > templetHeight+5) {
                        alertx('<spring:message code="tips.outofrange"/>');
                        flag = false;
                        closeLoading();
                        return false;
                    }
                }
                /*
                alert(xloc+itemwidth);
                alert(yloc+itemheight);
                if(xloc+itemwidth > width || yloc+itemheight > height){
                    alertx("设置页面资源超出屏幕边缘!");
                    flag = false;
                    closeLoading();
                    return false;
                }*/
            });
            if(!flag){
                return;
            }
            // ##################################################
            $.ajax({
                type: "post",
                url: "${ctx}/templet/eleTemplet/saveTempeteSource",
                data: {eleTempletId: eleTempletId,
                    name: name,
                    templateType: templateType,
                    width: width,
                    height: height,
                    displaymode: displaymode,
                    remarks: remarks,
                    fullscreen: fullscreen,
                    font:font,
                    color:color,
                    bgImage:bgImage,
                    bgGif:bgGif,
                    eleTempletSourceList: JSON.stringify(eleTempletSourceList)},
                dataType: "JSON",
                success: function(result) {
                    if('0001' == result.code){
                        window.location.href="${ctx}/templet/eleTemplet/show?id=" + result.data;
                    }else{
                        $("#btnSubmit").removeAttr("disabled");
                    	alertx(result.msg);
                    }
                }
            });
        }

        function addDrapItem(obj, width, height, xloc, yloc) {
            var img = $(obj).find(".tit_img").clone();
            var dlId = img.attr("id").split("_")[1];
            var source = eleTempletSourceList[dlId];

            var con_cur = $(obj).find(".tu-cur");
            if (con_cur.length > 0) {
                $("#" + dlId).remove();
                con_cur.remove();
                source.delFlag = 1;
                eleTempletSourceList[dlId] = source;
                currentSourceType = "";

                $("#styleUrl").val("");
                $("#styleId").val("");
                $("#styleName").val("");

            } else {
                if (source) {
                    width = parseInt(source.width);
                    height = parseInt(source.height);
                    xloc = parseInt(source.xloc);
                    yloc = parseInt(source.yloc);

                    $("#styleId").val(source.resourceId);
                    $("#styleName").val(source.resourceName);
                } else {
                    $("#styleId").val("");
                    $("#styleName").val("");
                }
                currentSourceType = dlId;
                var css = " style='";
                css += width ? "width:" + parseInt(parseInt(width)+3)+ "px;" : "0px;";
                css += height ? "height:" + parseInt(parseInt(height)+3)+ "px;" : "0px;";
                css += xloc ? "left:" + xloc + "px;" : "0px;";
                css += yloc ? "top:" + yloc + "px;" : "0px;";
                /*background: rgb(238, 238, 238);*/
                css+="border: 1px dashed  rgb(171, 171, 171);box-sizing: border-box;overflow:hidden;";
                css += "' ";

                img.css("width", "50px");
                img.css("height", "50px");

               /* var margin_left = width/2-25<0?0:width/2-25;
                img.css("margin-left", margin_left+'px');

                var margin_top = height/2-25<0?0:height/2-25;
                img.css("margin-top", margin_top+'px');
*/
                /*img.attr("id", "img_"+dlId);
                img.attr("class","hander");
                img.attr("onmousedown","selectSource('"+dlId+"')");
                img.attr("onmouseup","setSourcePosition('"+dlId+"')");*/
                /*img.attr("onmousemove","setSourcePosition('"+dlId+"')");*/

                var item_show = $("<div class='item_show hander'></div>");
                item_show.attr("id", "img_"+dlId);
                item_show.attr("onmousedown", "selectSource('"+dlId+"')");
                item_show.attr("onmouseup", "setSourcePosition('"+dlId+"')");

                var dl = "<dl id='" + dlId + "' " + css + ">"
                    + item_show[0].outerHTML
                    + img[0].outerHTML
                    + "<div  class='coor' id='co" + dlId + "'></div></dl>";

                $('#box').append(dl);
                $('#' + dlId).dragging({
                    move: 'both',
                    randomPosition: false,
                    width: "800px",
                    height: "600px",
                    hander: '.hander'
                });

                bindResize(document.getElementById(dlId),"co"+dlId);
                selectSource(dlId);

                var cur = "<div class='tu-cur'><img src='${ctxStatic}/images/source/cur.png'></div>";
                $(obj).append(cur);

                $('.coor').bind('mousedown',function () {

                   var id=this.id;
                    var str = id.substring(2,id.length);
                    /*obj=$("#"+str);*/
                    bindResize(document.getElementById(str),id);
                    console.log("进程序"+obj+id);
                    selectSource(str);
                    console.log("执行完"+dlId);

                });

                styleShow(dlId, source.view);
            }
        }
        /* 选择样式设置元素的样式 */
        function styleShow(resourceType, view) {
            if(view){
                var type = view.type;
                if (('title' == resourceType || 'sub' == resourceType || 'multimedia' == resourceType) && "default" == type) {
                    return;
                }
                var drgImg = $("#" + resourceType).find("img");
                drgImg.css("width", "100%");
                drgImg.css("height", "100%");
                drgImg.attr("src", "/elevator/static/images/source/null.png");

                var bgcolor = view.bgcolor;
                var item_show = $("#" + resourceType).find(".item_show");

                var html = "";
                if ('date' == resourceType || 'time' == resourceType || 'week' == resourceType
                    || 'title' == resourceType || 'sub' == resourceType || 'weather' == resourceType) {

                    var content = view.content;

                    var color = view.color;
                    var size = view.size;
                    var align = view.align;

                    var lineheight = item_show.parent().css("height");

                    html = "<span style='color: " + setBackgroundColor(color) + ";" +
                       /* "background-color: " + bgcolor + ";" +*/
                        "font-size: " + size + "px;" +
                        "vertical-align: middle; display: table-cell; overflow: hidden;white-space: nowrap;'>" +
                        content +
                        "</span>";
                    item_show.css("text-align", align);
                    if('title' == resourceType || 'sub' == resourceType){
                        item_show.css("overflow", "hidden");
                    }
                }
                else if ('alarm' == resourceType) {
                    if ('image' == view.type) {
                        html = "<table width='100%'><tr><td width='100%' align='"+align+"'>"
                        html += "<img src='${fns:getDictValue('website','website','')}" + view.imgpath + "' style='position: relative;'/>";
                        html += "</td></tr></table>"
                    } else {
                        var content = view.content;
                        html = "<span style='font-size: " + size + "px;" +
                            "overflow: hidden;'>" +
                            content +
                            "</span>";
                        item_show.css("text-align", align);
                    }

                }
                else if ('floor' == resourceType) {
                    var align = view.align;
                    if ('image' == view.type) {
                        html = "<div style='text-align: "+view.align+"'><div style='display:inline-block;white-space:nowrap;'>";
                        html += "<div style='float:left;'><img src='${fns:getDictValue('website','website','')}" + view.imgpath + "' style='position: relative;'/></div>";
                        html += "<div style='float:left;'><img src='${fns:getDictValue('website','website','')}" + view.imgpath + "' style='position: relative;'/><div>";
                        html += "</div></div>"
                    } else {
                        var content = view.content;

                        html = "<span style='font-size: " + size + "px;" +
                            "overflow: hidden;'>" +
                            content +
                            "</span>";
                        item_show.css("text-align", align);
                    }

                } else if ('direction' == resourceType) {
                    var width = parseInt(view.width);
                    var height = parseInt(view.height);
                    var imgpath = view.imgpath;
                    html = "<img src='${fns:getDictValue('website','website','')}" + imgpath + "' style='width:100%;height:100%;line-height: initial;'/>";
                } else if ('logo' == resourceType) {
                    var imgpath = view.imgpath;
                    html = "<img src='${fns:getDictValue('website','website','')}" + imgpath + "'/>";
                }
                else if ('multimedia' == resourceType) {
                    if('default' == view.type){
                        html = "<img src='${ctxStatic}/images/videoimg.jpg' style='width:100%;height:100%;line-height: initial;'/>";
                    }else{
                        if ('image' == view.type) {
                            html = "<img src='${fns:getDictValue('website','website','')}" + view.imgpath
                                + "' style='width:100%;height:100%;line-height: initial;'/>";
                        } else if ('video' == view.type) {
                            html = "<video src='${fns:getDictValue('website','website','')}"
                                + view.imgpath + "' controls='controls' width='100%' height='100%'>";
                        }
                    }
                } else if ("floored" == resourceType) {
                    var column = parseInt(view.column);
                    var width = parseInt(view.width);
                    var color = view.color;
                    var size = parseInt(view.size);
                    var align = view.align;
                    var w_space = parseInt(view.w_space);
                    var lineheight = parseInt(view.lineheight)+parseInt(view.size);
                    html = "<table style='color:" + setBackgroundColor(color) + ";background-color: " + setBackgroundColor(bgcolor) + ";font-size: " + size + "px;'>";
                    html += "<tr>";

                    var tr = "";
                    for (var i = 0; i < column; i++) {
                        tr += "<td style='width: " + (width + w_space) + "px;line-height: " + lineheight + "px;' align='" + align + "'>88</td>";
                    }
                    html = html + tr;
                    html += "</tr>";
                    html += "<tr>";
                    html = html + tr;
                    html += "</tr>";
                    html += "</table>";
                }

                item_show.css("background-color", setBackgroundColor(bgcolor));
                item_show.html(html);
            }
        }

//        function bind(e)
//        {
//         /* var a= $(this).id();*/
//            console.log(a);
//            //绑定需要拖拽改变大小的元素对象
//            //bindResize(document.getElementById('test'));
//        }
        function bindResize(el, id)
        {
            //初始化参数
            console.log("进了bindResize");
            var els = el.style,
                //鼠标的 X 和 Y 轴坐标
                x = 0;
            y = $("#box")[0].offsetTop;
            $("#"+id).mousedown(function (e)
            {
                bh=$("#box")[0].offsetTop;
                h=el.offsetTop;
                //按下元素后，计算当前鼠标与对象计算后的坐标
                x = e.pageX - el.offsetWidth, y = e.pageY- bh;
                //在支持 setCapture 做些东东
                el.setCapture ? (
                    //捕捉焦点
                    el.setCapture(),
                        //设置事件
                        el.onmousemove = function (ev)
                        {
                            mouseMove(ev || event);
                        },
                        el.onmouseup = mouseUp
                ) : (
                    //绑定事件
                    $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
                );
                //防止默认事件发生
                e.preventDefault();
            });
            //移动事件
            function mouseMove(e)
            {
                h = $("#box")[0].offsetTop;
                oh = el.offsetTop;
                els.width = e.pageX - x + 'px';
                els.height = e.pageY-h - oh + 'px';

                var sourceType = $("#" + id).parent().attr("id");
                var source = eleTempletSourceList[sourceType];

                var displaymode =$("#displaymode").val();
                var width = parseInt($("#width").val());
                var height = parseInt($("#height").val());

                var screenWidth = width;
                var screenHeight = height;

                // 如果是横屏,宽度 大于 高度
                if (displaymode === 0 || displaymode === '0') {
                    if (width >= height) {
                    } else {
                        screenWidth = height;
                        screenHeight = width;
                    }
                } else {
                    if (height >= width) {
                    } else {
                        screenWidth = height;
                        screenHeight = width;
                    }
                }

                screenWidth = null === screenWidth || '' === screenWidth || screenWidth == 0 ? 800 : screenWidth;
                screenHeight = null === screenHeight || '' === screenHeight ||  screenHeight == 0 ? 600 : screenHeight;

                var left = parseInt($("#"+sourceType).css("left").replace("px",""));
                var top = parseInt($("#"+sourceType).css("top").replace("px",""));
                source.width = els.width;
                if ((parseInt(els.width)+left)>screenWidth){
                    source.width = els.width=screenWidth-left+'px';
                }
                source.height = els.height;
                if ((parseInt(els.height)+top)>screenHeight){
                    source.height = els.height=screenHeight-top+'px';
                }

                $("#source_width").val(parseInt(els.width));
                $("#source_height").val(parseInt(els.height));
            }
            //停止事件
            function mouseUp()
            {
                el.releaseCapture ? (
                    //释放焦点
                    el.releaseCapture(),
                        //移除事件
                        el.onmousemove = el.onmouseup = null
                ) : (
                    //卸载事件
                    $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
                );
            }
        }
        function selectSource(sourceType) {

            var source = eleTempletSourceList[sourceType];
            if(!source){
                source = {};
                source.id = "";
                source.sourceType = sourceType;
                source.width = 50;
                source.height = 50;
                source.xloc = 0;
                source.yloc = 0;
            }
            source.delFlag = 0;
            var sw = parseInt(source.width);
            var sh = parseInt(source.height);

            $("#temSourceId").val(source.id);
            $("input[name='sourceType']").val(sourceType);
            $("#source_width").val(sw);
            $("#source_height").val(sh);
            var resourceUrl = "/source/eleSourceGroup/treeData?sourceType=" + sourceType;
			$("#styleUrl").val(resourceUrl);
            var source_left = $("#"+sourceType).css("left").replace("px","");
            if(isNaN(source_left)){
                source_left = 0;
            }
            source.xloc = parseInt(source_left);

            var source_top = $("#"+sourceType).css("top").replace("px","");
            if(isNaN(source_top)){
                source_top = 0;
            }
            source.yloc = parseInt(source_top);
            $("#xloc").val(parseInt(source.xloc));
            $("#yloc").val(parseInt(source.yloc));
			
            eleTempletSourceList[sourceType] = source;
        }

        function mgrInput(sourceType){
            var respath = $("input[name='respath']").parent().parent();
            var respath2 = $("input[name='respath2']").parent().parent();
            var remarks = $("#remarks").parent().parent();

        }

        function setSourcePosition(sourceType){
            var source = eleTempletSourceList[sourceType];
            if(!source){
                source = {};
            }

            source.xloc = parseInt($("#xloc").val());
            source.yloc = parseInt($("#yloc").val());

            eleTempletSourceList[sourceType] = source;
            $("#styleId").val(source.resourceId);
            $("#styleName").val(source.resourceName);
            var resourceUrl = "/source/eleSourceGroup/treeData?sourceType=" + sourceType;

            $("#styleUrl").val(resourceUrl);
        }

        function inputChange(obj) {
            var inputval = parseInt($(obj).val());
            if (isNaN(inputval)) {
                return;
            }
            if (inputval < 0) {
                inputval = Math.abs(inputval);
            }

            inputval = Math.round(inputval);

            var screenWidth = parseInt($("#width").val());
            var screenHeight = parseInt($("#height").val());


            var sourceType = $("input[name='sourceType']").val();

            var source = eleTempletSourceList[sourceType];
            var left = parseInt($("#"+sourceType).css("left").replace("px",""));
            var top = parseInt($("#"+sourceType).css("top").replace("px",""));
            var name = obj.name;
            source[name] = inputval;

            var obj_img = $("#" + sourceType);

            if (name == 'width') {
                if (inputval > screenWidth) {
                    inputval = screenWidth-left;
                }
                obj_img.css(name, parseInt(inputval) + "px");
                eleTempletSourceList[sourceType].width=parseInt(inputval);
            } else if (name == 'height') {
                if (inputval > screenHeight) {
                    inputval = screenHeight-top;
                }
                obj_img.css(name, parseInt(inputval) + "px");
                eleTempletSourceList[sourceType].height=parseInt(inputval);
            }else if (name == 'xloc') {
                if ((inputval+parseInt(eleTempletSourceList[sourceType].width)) > screenWidth) {
                    inputval = screenWidth-parseInt(eleTempletSourceList[sourceType].width);
                }
                obj_img.css('left', inputval + "px");
            } else if (name == 'yloc') {
                if ((inputval+parseInt(eleTempletSourceList[sourceType].height)) > screenHeight) {
                    inputval = screenHeight-parseInt(eleTempletSourceList[sourceType].height);
                }
                obj_img.css('top', inputval + "px");
            }
            $(obj).val(inputval);
        }
        function addResource(){
        	if(currentSourceType == ""){
        		alert("请选择资源类型");
        		return;
        	}
        	var urlSourceName = currentSourceType;
        	if(currentSourceType == "date" || currentSourceType == "time"){
        		urlSourceName = "time";
        	} 
        	if(currentSourceType == "floor" || currentSourceType == "floored"){
        		urlSourceName = "floor";
        	}
        	var sourceName = currentSourceType[0].toUpperCase() + currentSourceType.substring(1, currentSourceType.length);
        	if(currentSourceType == "direction" || currentSourceType == "alarm"){
        		sourceName = sourceName + "Group"
        	}
        	var formUrl = "${ctx}/source/"+urlSourceName+"/eleSource"+sourceName+"/form";
        	console.log(sourceName);
        	window.location.href = formUrl;
        }
        $(document).ready(function() {
            var $myColorPicker = $("input[name='background.color']").colorPicker({
                memoryColors: memoryColors,
                size: 3,
                readOnly: true,
                init: function (elm, colors) {
                    elm.style.backgroundColor = setBackgroundColor(elm.value);
                    elm.style.color = colors > 0.22 ? '#222' : '#ddd';
                },
                displayCallback: function(colors, mode, options) {
                    $('.box').css('backgroundColor', options._instance.toString());
                    setInputColor($(options.input), colors);
                }
            });
        	/*$("input[name='background.color']").colpick({
     			layout:'hex',
     			submit:0,
     			colorScheme:'dark',
     			color:'${eleTemplet.background.color}',
     			onChange:function(hsb,hex,rgb,el,bySetColor) {
     				$(el).css('border-color','#'+hex);
     				if(!bySetColor){
     					$(el).val('#'+hex);
     				}
                    $(".box").css("background-color",'#'+hex);
     			}
     		}).keyup(function(){
     			$(this).colpickSetColor(this.value);
     		});*/
        });
        function rotate(obj){
        	 var ObjId = obj.id;
             var h=$("#height").val();
             var w=$("#width").val();
             $(".box-3").css("height", w).css("width", h);
             $("#height").val(w);
             $("#width").val(h);
             $.each(eleTempletSourceList, function(index, value, array) {
                 var sourceType = value.sourceType;
                 console.log(sourceType);
				 var resource = eleTempletSourceList[sourceType];
				 var tmp = resource.xloc;
				 resource.xloc = resource.yloc;
				 resource.yloc = tmp;
				 
				 var tmp2 = resource.width;
				 resource.width = resource.height;
				 resource.height = tmp2;
				 $("#"+sourceType).css("top",resource.yloc).css("left",resource.xloc).css("width",resource.width).css("height",resource.height);
             });
        }
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li>
            <a href="${ctx}/templet/eleTemplet/">
                <spring:message code="template.list"/>
            </a>
        </li>
		<li class="active">
            <a href="${ctx}/templet/eleTemplet/form?id=${eleTemplet.id}">
                <shiro:hasPermission name="templet:eleTemplet:edit">
                    <c:if test="${not empty eleTemplet.id}">
                        <spring:message code="template.modify"/>
                    </c:if>
                    <c:if test="${empty eleTemplet.id}">
                        <spring:message code="template.add"/>
                    </c:if>
                </shiro:hasPermission>
                <shiro:lacksPermission name="templet:eleTemplet:edit">
                    <spring:message code="template.info"/>
                </shiro:lacksPermission>
            </a>
        </li>
	</ul>
	<form:form id="inputForm" modelAttribute="eleTemplet" action="${ctx}/templet/eleTemplet/save" method="post" class="breadcrumb form-search">
		<form:hidden id="eleTempletId" path="id"/><form:hidden path="flag"/>
		<sys:message content="${message}"/>
        <ul class="ul-form">

            <li style="/*width: 30%*/"><label><spring:message code="template.name"/>：</label>
                <form:input id="name" path="name" htmlEscape="false" maxlength="255" class="input-small input_tmp required"/>
            </li>
            <li style="/*width: 30%*/"><label><spring:message code="font"/>：</label>
                <sys:treeselect id="font" name="font" value="${eleTemplet.font.id}" labelName="font"
                                labelValue="${eleTemplet.font.name}"
                                cssClass="input-small "
                                title="<spring:message code='font'/>" url="/source/font/eleSourceFont/treeData" allowInput="false"/>
            </li>
            <li><label><spring:message code='common.remarks'/>：</label>
                <form:input id="templet_remarks" path="remarks" htmlEscape="false" style="width:20em !important" class="input-small "/>
            </li>

            <li style="/*width: 30%*/clear: left"><label><spring:message code='menu.device.Equipment_Type'/>：</label>
                <sys:treeselect id="templateType" name="templateType" value="${eleTemplet.type.id}"
                                labelName="type.name" labelValue="${eleTemplet.type.name}"
                                title="<spring:message code='menu.device.Equipment_Type'/>"
                                url="/equipment/eleEquipmentType/treeData" cssClass="input-small"/>
            </li>
            
            <li style="/*width: 30%*/"><label><spring:message code='common.resolution'/>：</label>
                <form:input id="width" path="width" htmlEscape="false" value=""
                            maxlength="11" class="input-mini digits required" cssStyle="width: 65px;" readonly="true"/>
                X
                <form:input id="height" path="height" htmlEscape="false" value=""
                            maxlength="11" class="input-mini digits required" cssStyle="width: 65px;" readonly="true"/>
            </li>


            <li><label><spring:message code="device.orientation"/>：</label>
                <c:if test="${Locale eq 'zh_CN'}">
                    <form:input id="orientation" path="displaymode" htmlEscape="false" maxlength="255"
                                class="input-mini " readonly="true"
                                value="${fns:getDictLabel(eleTemplet.displaymode, 'orientation' ,'竖屏')}"/>
                </c:if>
                <c:if test="${Locale eq 'en_US'}">
                    <form:input id="orientation" path="displaymode" htmlEscape="false" maxlength="255"
                                class="input-mini " readonly="true"
                                value="${fns:getEnDictLabel(eleTemplet.displaymode, 'orientation' ,'Portait')}"/>

                </c:if>
                <input id="displaymode" type="hidden" value="${eleTemplet.displaymode}"/>
            </li>
        </ul>
        <ul class="ul-form">
             <li style="/*width: 30%*/"><label><spring:message code="template.backgroud.color"/>：</label>
                <form:input id="templet_color" path="background.color" htmlEscape="false" class="input-small input_tmp" cssStyle="width: 60px;"/>
            </li>
             <li style="/*width: 350px;*/overflow: hidden;"><label><spring:message code="template.backgroud.image"/>：</label>
                 <div style="width: 260px;float: right;">
                    <form:hidden id="bgImage" path="background.bgImage" htmlEscape="false" maxlength="255" class="input-small"/>
                    <sys:ckfinder input="bgImage" type="images" uploadPath="/source/background/eleSourceBackground" selectMultiple="false" langCode="${langCode}"/>
                 </div>
            </li>
           
        </ul>
        <div class="ul-form tu-con">
            <%-- 添加元素按钮 --%>
            <div id="sourceTypeList" class="tu-con-sou">
                <c:forEach items="${fns:getDictList('source_type')}" var="type">
                    <c:if test="${'apk' != type.value && 'background' != type.value }">

                        <div class="tu-con-item" onclick="addDrapItem(this,'50','50','0','0')" title="${type.label}">
                        <c:if test="${Locale eq 'zh_CN'}">
                            <img id="img_${type.value}" class="tit_img" src="${ctxStatic}/images/source/${type.value}.png" title="${type.label}">
                         </c:if>
                          <c:if test="${Locale eq 'en_US'}">
                            <img id="img_${type.value}" class="tit_img" src="${ctxStatic}/images/source/${type.value}.png" title="${type.enlabel}">
                          </c:if>
                            <span>${type.label}</span>
                        </div>

                    </c:if>
                </c:forEach>
            </div>
            <%-- 属性区域 --%>
            <div style="width: 100%;float: left;margin-left: 10px;margin-top: 20px;">
                <div id="inputForm" class="form-horizontal">
                    <input type="hidden" id="temSourceId" name="temSourceId"/>
                    <input type="hidden" name="sourceId"/>
                    <input type="hidden" name="sourceType"/>
                    <div class="control-group" style="width: 600px;float: left;">
                        <spring:message code="template.width"/>:<input id="source_width" name="width" class="input-mini" onkeyup="inputChange(this);"/>
                        <spring:message code="template.height"/>:<input id="source_height" name="height" class="input-mini" onkeyup="inputChange(this);"/>
                        &nbsp;X:<input id="xloc" name="xloc" class="input-mini" onkeyup="inputChange(this);" />
                        &nbsp;Y:<input id="yloc" name="yloc" class="input-mini" onkeyup="inputChange(this);" />
                    </div>
                    <div style="width: 500px;float: left;">
                        <label>
                            <spring:message code="template.resource.style"/>：
                        </label>
                        <sys:treeselect id="style" name="style" value="" labelName="resource" labelValue="" cssClass="input-small" title="" url="" allowInput="false"/>
                        

                        <shiro:hasPermission name="templet:eleTemplet:edit">
                            <input id="btnSubmit" class="btn btn-primary" type="submit" value='<spring:message code="common.save.preview"/>'
                                   onclick="$('#flag').val('0');"/>&nbsp;
                        </shiro:hasPermission>
                    </div>
                </div>
            </div>
            <%-- 编辑区域 --%>
            <div class="box-par">
                <div class="set-out" style="overflow: hidden">
                    <div id="box" class='box box-3' style="width:${0==templetWidth?800:templetWidth}px;height:${0==templetHeight?600:templetHeight}px;">
                    </div>
                </div>
            </div>
        </div>
	</form:form>

</body>
</html>